<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
  
    /* 顶部导航 */
    .nav{
        width:300px;
        height: 30px;
        border-radius: 15px;
        font-size: 20px;
        color: #505050;
        background-image: url(../jpg/搜索.png);
        background-repeat: no-repeat;
        background-position: 10px;
    }
    span{
        font-size: 20px;
        color: #505050;
    }
    /* 菜单1 */
    .menu{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;
        color: #505050;
    }
    /* 子菜单1 */
    .submenu1{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 20px;
    }
    .submenu1>span{
        margin-left: 30px;
        color: #99a4bd;
    }
    /* 子菜单2 */
    .submenu2{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: space-between;
    }
    .submenu2>span{
        margin-left: 25px;
        margin-top: 20px;
        color: #99a4bd;
    }
</style>
<body>
    <!-- 顶部导航 -->
    <input class="nav" type="text" placeholder="      网易云课堂">
    <span>取消</span>
    <!-- 菜单1 -->
    <div class="menu">
        <span>搜索历史</span>
        <span>清楚记录</span>
    </div>
    <!-- 子菜单1 -->
    <div class="submenu1">
        <span>语言</span>
        <span>考研</span>
    </div>
    <!-- 菜单2 -->
    <div class="menu">
        <span>热门搜索</span>
    </div>
    <!-- 子菜单2 -->
    <div class="submenu2">
        <span>系统</span>
        <span>运营</span>
        <span>深度</span>
        <span>线性</span>
        <span>学习</span>
        <span>3dmax</span>
        <span>spring</span>
        <span>ui</span>
        <span>爬虫</span>
        <span>web</span>
    </div>
    
</body>
</html>